<template>
	<view class="container">
		<map id="map" class="map" :latitude="userLocation.latitude" :longitude="userLocation.longitude"
			:markers="markers" :polyline="polyline" :circles="circles" @show-location="true"
			@markertap="handleMarkerTap">
			<cover-view slot="callout">
				<cover-view class="custom-callout" :marker-id="item.id" v-for="(item,index) in markers" :key="index">
					<cover-view class="title">
						{{item.id && String(item.id).slice(0,3) == 911 ? `待取:${item.orderCount}件`:`待送:${item.orderCount}件`}}
					</cover-view>
					<!-- <cover-view class="arrow">11111</cover-view> -->
				</cover-view>
			</cover-view>
		</map>

		<view class="slider-panel" :style="'bottom:'+ panelHeight +'vh;'">
			<view class="topbtn">
				<view style="width: 100rpx;height: 18rpx;background-color: #A4A4A4;border-radius: 10rpx;"
					@tap="heightKong">
				</view>
			</view>
			<view class="panel-content">
				<scroll-view scroll-y style="height: 100%;" @scroll="handleScroll">
					<cityLogistics @child-event="queryDriverLineOrder" ref="childRef" :riderLineList="riderLineList">
					</cityLogistics>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	import cityLogistics from '@/pages/riderMy/cityLogistics/index.vue'
	import empty from '@/components/empty'
	// 引入腾讯地图SDK
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js';
	import {
		AddressReverse
	} from '@/utils/ruoyi.js';
	import {
		generateSignatureGet
	} from '@/utils/signature.js';
	import jsonp from '@/common/jsonp'
	import configdata from '@/common/config.js'
	export default {
		components: {
			empty,
			cityLogistics,
		},
		data() {
			return {
				panelHeight: -40,
				list: [{
						name: '待接单'
					},
					{
						name: '待出库'
					}
				],
				current: 0,
				bold: false,
				lists: [],
				// 标记点数组
				markers: [],
				markerList: [],
				// 路线数据
				polyline: [],
				// 圆形区域（用于显示当前位置精度）
				circles: [],
				// 途经点集合
				waypoints: [],
				mapKey: configdata.MapKey,
				// 地图上下文
				mapContext: null,
				// 是否正在导航
				isNavigating: false,
				// 用户当前位置
				userLocation: null,
				// 位置更新定时器
				locationTimer: null,
				// 当前路线点索引
				currentPointIndex: 0,
				// 剩余距离
				remainingDistance: '0米',
				// 剩余时间
				remainingTime: '0分钟',
				// 下一个转向信息
				nextTurnInfo: '直行',
				// 完整路线点数组
				routePoints: [],
				// 路线总距离
				totalDistance: 0,
				// 路线总时间
				totalTime: 0,

				delivered: [],
				pickUp: [],

				groupedArray: {}, //某个快递柜中的订单
				riderLineList: {},
				updateTime: '',
			}
		},


		onShow() {
			// 获取用户当前位置
			this.getUserLocation();
			this.$refs.childRef.taskData();
			this.getList()
			this.queryDriverLineOrder();
			
		},
		
		onLoad() {
			// 每3秒更新一次位置
			this.locationTimer = setInterval(() => {
				this.updateUserLocation();
			}, 5000);
		},


		onUnload() {
			// 页面卸载时清理定时器
			if (this.locationTimer) {
				clearInterval(this.locationTimer);
			}
		},


		methods: {



			//控制高度
			heightKong() {
				if (this.panelHeight == 0) {
					this.panelHeight = -40
				} else {
					this.panelHeight = 0
				}
			},

			//根据是否滑动判断是否上升
			handleScroll(e) {
				if (e.detail.scrollTop > 5) {
					this.panelHeight = 0
				}
			},

			// 初始化地图
			initMap() {
				// 创建地图上下文
				this.mapContext = uni.createMapContext('map', this);

				// 更新用户位置标记
				this.updateUserLocationMarker();
			},

			//点击标记点
			handleMarkerTap(event) {
				const {
					markerId
				} = event;
				let data = this.markers.find(it => it.id == markerId)
				let portData = {
					latitude: data.latitude,
					longitude: data.longitude,
					title: data.title,
				}
				let riderLine = this.riderLineList
				uni.navigateTo({
					url: '/pageA/expressOrder/regional?portData=' + encodeURIComponent(JSON.stringify(portData)) +
						'&riderLine=' + encodeURIComponent(JSON.stringify(riderLine))
				})
			},

			getList() {
				try {
					const userId = uni.getStorageSync('userId');
					this.$Request.getT('/app/riderLine/queryRiderLine').then(res => {
						if (res.code == 0 && res.data) {

							this.riderLineList = res.data
							this.markerList.push({
								id: 0,
								latitude: res.data.startPointLat,
								longitude: res.data.startPointLng,
								title: res.data.startPointName,
								iconPath: '../../static/image/start.png',
								width: 50,
								height: 50,
								callout: {
									content: '起始点',
									color: '#ffffff',
									fontSize: 12,
									borderRadius: 4,
									bgColor: '#1296DB',
									padding: 4,
									display: 'ALWAYS'
								}
							}, {
								id: res.data.wayPoints.length + 1,
								latitude: res.data.endPointLat,
								longitude: res.data.endPointLng,
								title: res.data.endPointName,
								iconPath: '../../static/image/end.png',
								width: 40,
								height: 40,
								callout: {
									content: '结束点',
									color: '#ffffff',
									fontSize: 12,
									borderRadius: 4,
									bgColor: '#1296DB',
									padding: 4,
									display: 'ALWAYS'
								}
							});


							res.data.wayPoints.forEach((it, index) => {
								this.markerList.push({
									id: index + 1,
									latitude: it.latitude,
									longitude: it.longitude,
									title: it.name,
									iconPath: '../../static/image/waypoint.png',
									width: 30,
									height: 30,
									callout: {
										content: it.name,
										color: '#ffffff',
										fontSize: 12,
										borderRadius: 4,
										bgColor: '#D1CD70',
										padding: 4,
										display: 'ALWAYS'
									}
								})
							})
						}
					});
				} catch (err) {
					console.error('同步获取失败:', err);
				}
			},

			// 获取用户当前位置
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.userLocation = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						this.initMap()
						this.$nextTick(() => {
							this.calculateRoute()
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '获取位置失败',
							icon: 'none'
						});
					}
				});
			},

			//根据司机id获取各点位订单信息
			queryDriverLineOrder() {
				try {
					const userId = uni.getStorageSync('userId');
					this.$Request.getT('/app/logisticsOrder/queryDriverLineOrder', {
						userId: userId
					}).then((res) => {
						if (res.code == 0) {

							this.markers = []
							this.updateUserLocationMarker();
							this.delivered = res.data.delivered
							this.pickUp = res.data.pickUp


							if (this.delivered.length > 0) {
								this.delivered.forEach((it, index) => {
									this.markers.push({
										id: Number("811" + index),
										latitude: it.deliveredLat,
										longitude: it.deliveredLng,
										title: it.orders[0].deliveredAddressName,
										orderCount: it.orderCount,
										iconPath: '../../static/image/points.png',
										width: 40,
										height: 40,
										customCallout: {
											anchorX: 0, // 横向偏移量（向右偏移10rpx）
											// anchorY: -20,  // 纵向偏移量（向下偏移20rpx）
											display: 'ALWAYS' // 常显模式
										}
									});
								})
							}
							if (this.pickUp.length > 0) {
								this.pickUp.forEach((it, index) => {
									this.markers.push({
										id: Number("911" + index),
										latitude: it.pickUpLat,
										longitude: it.pickUpLng,
										title: it.orders[0].pickUpAddressName,
										orderCount: it.orderCount,
										iconPath: '../../static/image/points.png',
										width: 40,
										height: 40,
										customCallout: {
											anchorX: 0, // 横向偏移量（向右偏移10rpx）
											anchorY: -30, // 纵向偏移量（向下偏移20rpx）
											display: 'ALWAYS' // 常显模式
										}
									});
								})
							}

							setTimeout(() => {
								let point = []
								if (this.markers.length > 1) {
									point = this.markers.map(it => {
										let data = {
											latitude: it.latitude,
											longitude: it.longitude
										}
										return data
									})
								} else {
									point = this.markerList.map(it => {
										let data = {
											latitude: it.latitude,
											longitude: it.longitude
										}
										return data
									})
								}


								// 自动调整视野
								this.mapContext.includePoints({
									points: point,
									padding: [120, 80, 120, 80]
								});
							}, 1200)

						}
					});
				} catch (err) {
					console.error('同步获取失败:', err);
				}
			},



			//根据经纬度获取地址
			latLngQueryAddress(lat, lng) {
				return new Promise((resolve, reject) => {
					const path = '/ws/geocoder/v1';
					const params = {
						key: this.mapKey,
						location: `${lat},${lng}`
					};
					const sk = configdata.SecretKey;
					const sig = generateSignatureGet(path, params, sk);
					params.sig = sig;
					const url = `https://apis.map.qq.com${path}?${this.encodeParams(params)}`;

					uni.request({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								// 修正数据路径（根据实际返回结构调整）
								const address = res.data.result?.formatted_addresses?.recommend;
								resolve(address); // 成功时返回地址
							} else {
								reject(new Error('请求失败')); // 处理 HTTP 错误状态
							}
						},
						fail: (err) => {
							reject(err); // 处理网络错误
						}
					});
				});
			},




			encodeParams(params) {
				return Object.entries(params)
					.map(([key, value]) => {
						return `${key}=${encodeURIComponent(value)}`
					})
					.join('&')
			},






			// 更新用户位置标记
			updateUserLocationMarker() {
				
				if (!this.userLocation) return;
				
				const userMarker = {
					id: 99999,
					latitude: this.userLocation.latitude,
					longitude: this.userLocation.longitude,
					title: '我的位置',
					// iconPath: '../../static/image/user-location.png',
					width: 26,
					height: 40,
					callout: {
						content: '当前位置',
						color: '#ffffff',
						fontSize: 12,
						borderRadius: 4,
						bgColor: '#F24E4E',
						padding: 4,
						display: 'ALWAYS'
					}
				};
				
				
				
				
				// 查找是否已存在用户位置标记
				const userMarkerIndex = this.markers.findIndex(marker => marker.id === 999);
				if (userMarkerIndex > -1) {
					// 更新现有标记
					this.markers.splice(userMarkerIndex, 1, userMarker);
				} else {
					// 添加新标记
					this.markers.push(userMarker);
				}

				// 添加位置精度圆圈
				this.circles = [{
					latitude: this.userLocation.latitude,
					longitude: this.userLocation.longitude,
					radius: 15,
					fillColor: '#367EEF20',
					color: '#367EEF40',
					strokeWidth: 1
				}];
			},




			// 计算路线
			calculateRoute() {
				// 转换格式：{latitude, longitude} -> "lat,lng"
				const waypointsStr = this.markerList.slice(1, -1).map(point => `${point.latitude},${point.longitude}`)
					.join(';');
				// 清空旧路线
				this.polyline = [];
				// 调用路线规划API
				this.$nextTick(() => {

					const path = '/ws/direction/v1/driving';
					const params = {
						key: this.mapKey,
						from: `${this.markerList[0].latitude},${this.markerList[0].longitude}`,
						to: `${this.markerList[this.markerList.length-1].latitude},${this.markerList[this.markerList.length-1].longitude}`,
						waypoints: waypointsStr
					};
					const sk = configdata.SecretKey;
					const sig = generateSignatureGet(path, params, sk);
					params.sig = sig;
					const url = `https://apis.map.qq.com${path}?${this.encodeParams(params)}`;

					uni.request({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								// 修正数据路径（根据实际返回结构调整）
								this.handleRouteSuccess(res.data)
							}
						},
						fail: (err) => {
							console.log(err);
						}
					});
				})

			},

			// 路线规划成功回调
			handleRouteSuccess(res) {
				if (!res.result || !res.result.routes || res.result.routes.length === 0) {
					uni.showToast({
						title: '未找到可行路线',
						icon: 'none'
					});
					return;
				}

				const route = res.result.routes[0];
				const coors = route.polyline;
				const kr = 1000000; // 压缩系数

				// 坐标解压算法
				for (let i = 2; i < coors.length; i++) {
					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
				}

				// 生成路径点数组
				const points = [];
				for (let i = 0; i < coors.length; i += 2) {
					points.push({
						latitude: coors[i],
						longitude: coors[i + 1]
					});
				}

				// 保存路线点用于导航
				this.routePoints = points;

				// 更新路线数据
				this.polyline = [{
					points: points,
					color: '#367EEF',
					width: 6,
					borderWidth: 2,
					borderColor: '#5B98FD',
					arrowLine: true
				}];

				// 保存路线信息
				this.totalDistance = route.distance || 0;
				this.totalTime = route.duration || 0;


				let point = this.markers.map(it => {
					let data = {
						latitude: it.latitude,
						longitude: it.longitude
					}
					return data
				})

				// 自动调整视野
				this.mapContext.includePoints({
					points: point,
					padding: [80, 80, 80, 80]
				});



				// 更新距离和时间显示
				this.updateRouteInfo();
			},

			// 更新路线信息显示
			updateRouteInfo() {
				// 格式化距离
				if (this.totalDistance < 1000) {
					this.remainingDistance = `${this.totalDistance}米`;
				} else {
					this.remainingDistance = `${(this.totalDistance / 1000).toFixed(1)}公里`;
				}

				// 格式化时间
				if (this.totalTime < 60) {
					this.remainingTime = `${this.totalTime}分钟`;
				} else {
					const hours = Math.floor(this.totalTime / 60);
					const minutes = this.totalTime % 60;
					this.remainingTime = `${hours}小时${minutes}分钟`;
				}
			},

			

			

			// 更新用户位置
			updateUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.userLocation = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						this.$Request.getT('/timedtask/riderLocation', {
							userId: uni.getStorageSync('userId'),
							lng: this.userLocation.longitude,
							lat: this.userLocation.latitude,
						}).then(res => {
							console.log('位置信息更新', res)
						});
						// 更新用户位置标记
						this.updateUserLocationMarker();
					},
					fail: (err) => {
						console.error('更新位置失败:', err);
					}
				});
			},

			

			// 计算两点间距离（米）
			calculateDistance(lat1, lng1, lat2, lng2) {
				const radLat1 = lat1 * Math.PI / 180.0;
				const radLat2 = lat2 * Math.PI / 180.0;
				const a = radLat1 - radLat2;
				const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS
				s = Math.round(s * 10000) / 10;
				return s;
			},

			// 重新定位地图中心到用户位置
			recenterMap() {
				if (this.userLocation) {
					this.mapContext.moveToLocation({
						latitude: this.userLocation.latitude,
						longitude: this.userLocation.longitude
					});
				}
			},

			// 停止导航
			stopNavigation() {
				this.isNavigating = false;

				// 清除位置更新定时器
				if (this.locationTimer) {
					clearInterval(this.locationTimer);
					this.locationTimer = null;
				}

				// 移除用户位置标记
				const userMarkerIndex = this.markers.findIndex(marker => marker.id === 999);
				if (userMarkerIndex > -1) {
					this.markers.splice(userMarkerIndex, 1);
				}

				// 清空位置精度圆圈
				this.circles = [];

				uni.showToast({
					title: '导航已结束',
					icon: 'none'
				});
			},

			// 清空所有
			clearAll() {
				this.markers = [this.markers[0]]; // 保留起点
				this.polyline = [];
				this.waypoints = [];
				this.routePoints = [];
				this.isNavigating = false;

				// 清除定时器
				if (this.locationTimer) {
					clearInterval(this.locationTimer);
					this.locationTimer = null;
				}

				// 清空导航相关信息
				this.currentPointIndex = 0;
				this.remainingDistance = '0米';
				this.remainingTime = '0分钟';
				this.nextTurnInfo = '直行';
				this.circles = [];
			}
		}
	}
</script>


<style scoped lang="scss">
	.custom-callout {
		background: #16C4AF;
		border-radius: 8rpx;
		padding: 12rpx;
		color: #fff;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}



	.container {
		position: relative;
		height: 100vh;
	}

	.topbtn {
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		position: relative;

		.topbtn_fan {
			position: absolute;
			left: 10rpx;
			top: 0;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #A4A4A4;
		}
	}

	.slider-panel {
		position: fixed;
		left: 0;
		width: 100%;
		min-height: 80vh;
		background: #fff;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
		z-index: 999;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		transition: .5s;
	}


	.panel-content {
		/* padding: 20rpx; */
		height: calc(80vh - 120rpx);
		overflow: visible;
		background-color: #F5F5F5;
	}

	.panel-header {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}


	.map {
		width: 100%;
		height: 70vh;
	}

	.control-panel {
		position: absolute;
		top: 20px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		gap: 15px;
		padding: 10px;
		z-index: 100;
	}

	.nav-panel {
		position: absolute;
		top: 20px;
		left: 20px;
		right: 20px;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.nav-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.distance {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.time {
		font-size: 18px;
		color: #666;
		align-self: flex-end;
	}

	.next-turn {
		font-size: 14px;
		color: #999;
	}

	.turn-info {
		color: #367EEF;
		margin-left: 10px;
	}

	.nav-control-panel {
		position: absolute;
		bottom: 100px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		gap: 15px;
		padding: 10px;
		z-index: 100;
	}

	.start-nav-button {
		position: absolute;
		bottom: 100px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		z-index: 100;
	}

	button {
		background-color: #367EEF;
		color: white;
		border-radius: 20px;
		padding: 8px 20px;
		font-size: 14px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		border: none;
	}

	button[disabled] {
		background-color: #cccccc;
		opacity: 0.7;
	}

	.tabs_box {
		/* display: none; */
		/* margin-top: 90rpx; */

	}

	.dis {
		/* display: block; */
		width: 100%;
	}

	.u-tab-item {
		font-size: 26upx !important;
		/* color: #666666 !important; */
	}

	.success_box {
		width: 100%;
	}

	.order_box {
		width: 90%;
		margin: 0 auto;
		/* height: 390rpx; */
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 16px;
		padding-bottom: 16rpx;
		/* border: 1rpx solid #e5e5e5; */
		/* box-shadow: 1rpx 1rpx 1rpx 1rpx #e5e5e5 ; */
	}

	.order_success {
		width: 90%;
		margin: 0 auto;
		display: flex;
		min-height: 80upx;
	}

	.order_name {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		font-weight: bold;
		font-size: 26rpx;
		letter-spacing: 1upx;
	}

	.order_data {
		flex: 1;
		color: #999999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
	}

	.city_type {
		width: 90%;
		margin: 0 auto;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.type_name {
		font-size: 27rpx;
	}

	.city_text {
		width: 70rpx;
		line-height: 36rpx;
		color: #49A5FF;
		background: #c4e2ff;
		text-align: center;
		font-size: 19rpx;
		margin-left: 20rpx;
	}

	.city_address {
		width: 85%;
		margin: 0 auto;
		margin-top: -10rpx;
	}

	/* 发货地址 */
	.fh_box {
		display: flex;
		/* height: 80upx; */
		margin-top: 20upx;
	}

	.fh_image {
		flex: 1;
	}

	.box {
		flex: 11;
	}

	.fh_name {
		font-size: 26rpx;
		font-weight: 600;
		letter-spacing: 2upx;
	}

	.fh_type {
		color: #999999;
		font-size: 22upx;
	}

	.fh_type text {
		margin-left: 20upx;
	}

	/* 送货地址 */
	.sh_box {
		display: flex;
		margin-bottom: 14upx;
		margin-top: 14rpx;
	}

	.sh_image {
		flex: 1;
	}

	.sh_name {
		font-size: 26rpx;
		font-weight: 600;
		letter-spacing: 2upx;
	}

	.sh_type {
		color: #999999;
		font-size: 22upx;
	}

	.sh_type text {
		margin-left: 20upx;
	}

	.fh_image image {
		width: 30upx;
		height: 30upx;
	}

	.sh_image image {
		width: 30upx;
		height: 30upx;
	}

	.order_btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* height: 80upx; */
		margin-top: 8upx;
	}

	.btn1 {
		width: 170upx;
		font-size: 22upx;
		line-height: 60upx;
		text-align: center;
		border: 1upx solid #9C9C9C;
		border-radius: 20upx;
		color: #9C9C9C;
		margin-right: 30upx;
	}

	.btn2 {
		width: 170upx;
		line-height: 60upx;
		color: white;
		background: #FF6A04;
		font-size: 22upx;
		text-align: center;
		margin-right: 30upx;
		border-radius: 20upx;
	}

	.btn3 {
		width: 170upx;
		line-height: 60upx;
		color: white;
		background: #55aaff;
		font-size: 22upx;
		text-align: center;
		margin-right: 30upx;
		border-radius: 20upx;
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	.u-input--border {
		border: 1px solid #F2F2F2 !important;
		background: #F2F2F2 !important;
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	.u-input__input {
		font-size: 30rpx;
		font-weight: bold;
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: #FF7F00;
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		letter-spacing: 2rpx;
	}

	.tabbar {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		/* #ifndef MP-WEIXIN */
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		/* #endif */
		z-index: 99;
	}

	.paytut {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #000000;
		color: #fff;
		margin: 30upx;
		border-radius: 55upx;
		overflow: hidden;
	}
</style>